<template>
    <div class="box">
        <!-- <h4 class="header">
            天气预报<span class="titleEn">Weather Forecast</span>
        </h4> -->
        <div class="title">
            <Title :title="titleOne"></Title>
        </div>
        <div class="weather">
            <div class="weather_top">
                <div class="left_t">
                    <div class="name">
                        <select class="select1">
                            <option value="gaoshan">高山镇</option>
                        </select>
                    </div>
                    <!-- <div class="icon_text">
            {{ weatherData.data.text }} <br />{{ weatherData.data.temp }}℃
          </div> -->
                    <!-- <img class="icon" :style="{ fill: svgColor }"
                        :src="weatherData.data.icon ? require(`../assets/icons/${weatherData.data.icon}.svg`) : ''"
                        alt=""> -->
                    <!-- <object
            ref="svgObject"
            class="icon"
            type="image/svg+xml"
            :data="
              weatherData.data.icon
                ? require(`../assets/icons/${weatherData.data.icon}.svg`)
                : ''
            "
          ></object> -->
                </div>
                <div class="right_t">
                    <object ref="svgObject" class="icon" type="image/svg+xml" :data="weatherData.data.icon
                        ? require(`../assets/icons/${weatherData.data.icon}-fill.svg`)
                        : ''
                        "></object>
                    <div class="icon_text">
                        {{ weatherData.data.text }} <br />{{ weatherData.data.temp }}℃
                    </div>
                    <!-- <div class="btn_1">更多信息</div>
                    <div class="btn_2" v-if="weatherData.data.windScale >= 5">大风预警</div> -->
                </div>
            </div>
            <div class="weather_bottom">
                <!-- <div class="weather_bottom_item">
          <div class="weather_bottom_item_title">
            <p>相对湿度</p>
            <p>{{ weatherData.data.humidity }}%</p>
          </div>
          <div class="weather_bottom_item_title">
            <p>大气压强</p>
            <p>{{ weatherData.data.pressure }}hpa</p>
          </div>
        </div> -->
                <div class="weather_bottom_item">
                    <div class="weather_bottom_item_title">
                        <div class="img_2"><img src="" alt=""></div>
                        <div>风险报警</div>
                        <p>风速</p>
                        <p>{{weatherData.data.windDir + weatherData.data.windSpeed }}级</p>
                    </div>
                    <div class="weather_bottom_item_title">
                        <div class="img_2"><img src="" alt=""></div>
                        <div>雨量报警</div>
                        <p>降水量</p>
                        <p>{{ weatherData.data.precip }}mm</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/pages/compontents/title/index.vue';
import { onMounted, ref, onBeforeMount, reactive } from "vue";
// import 'qweather-icons/font/fonts/qweather-icons.css';
// import axios from 'axios';
let titleOne=ref('实时天气预报')
let svgColor = "#fff";
let weatherData = reactive({ data: {} });
// 和风天气 API 请求地址
const weatherAPIUrl = "https://devapi.qweather.com/v7/weather/now";

// // 和风天气 API 密钥
const apiKey = "b47c6ab7e380486182a3c7b75ac9c426";
// let weatherAPIUrl="https://api.seniverse.com/v3/weather/now.json"
// let apiKey = "SPB_o2ghW0WIbjtTm"
// let location="beijing"
// 荥阳市城市代码
const location = "101180103";
// 获取天气信息并更新显示
function getWeather() {
    // return new Promise((resolve, reject) => {
    // axios.get(`${weatherAPIUrl}?location=${location}&key=${apiKey}`)
    //     .then(response => {
    //         weatherData.data = response.data.now;
    //     })
    //     .catch(error => {
    //         console.log(error);
    //         reject(error);
    //     });
    // });
    fetch(`${weatherAPIUrl}?location=${location}&key=${apiKey}`)
        .then((response) => response.json())
        .then((response) => {
            // console.log(response);
            weatherData.data = response.now;
        })
        .catch((error) => {
            console.log(error);
        });
}

function getWeatherIconUrl(icon) {
    console.log(icon);
    // 根据天气图标名称生成对应的图标 URL
    return `@/assets/icons/${icon}.svg`;
}
onBeforeMount(async () => {
    // 调用函数来获取并显示天气信息
});
let svgObject = ref(null);
function getSvg() {
    svgObject.value.addEventListener("load", () => {
        const svgDoc = svgObject.value.contentDocument;
        // console.log(svgDoc);
        const svgElement = svgDoc.querySelector("svg");
        // 修改颜色
        svgElement.style.fill = "#fff"; // 设置填充颜色为红色
        svgElement.style.stroke = "#fff"; // 设置描边颜色为蓝色
        svgElement.style.strokeWidth = "0px";
    });
}
// getSvg()
// onMounted(async () => {
//     await getWeather()
//     // getSvg()
// })
onMounted(() => {
    getWeather();
    getSvg();
});
</script>
<style scoped src="@/assets/weather.css"></style>
